<!--log list -->
<template>
  <div shadow="never"
       class="aui-card--fill log_lisinfo">
    <div class="query_condtions">
      <div class="condition_lf"
           style="font-size:16px;color:#404040;font-weight:600">
        Sync History
        <!-- <el-select v-model="dataForm.api"
                        @change="getDataList"
                        filterable
                        clearable
                        :placeholder="$t('custom.connector.loginfo.formPlaceholder.api')"
                        style="width:100%;">
                <el-option v-for="item in apiLists"
                          :key="item"
                          :label="item"
                          :value="item">
                </el-option>
              </el-select> -->
      </div>
      <div class="condition_rg">
        <ejs-daterangepicker :placeholder="$t('custom.marketbot.attenddanceidlereport.search_changedTimeRange')"
                             style=""
                             :format="dateRangeDefaultSetting.format"
                             v-model="dataForm.searchDate"
                             @change="getDataList"
                             :strictMode="dateRangeDefaultSetting.selectionMode">
          <e-presets>
            <e-preset :label="$t('custom.marketbot.clientUsageReport.toDay')"
                      :start='dateRangeDefaultSetting.toDayStartDate'
                      :end='dateRangeDefaultSetting.toDayEndDate'>
            </e-preset>
            <e-preset :label="$t('custom.marketbot.clientUsageReport.thisWeek')"
                      :start='dateRangeDefaultSetting.weekStartDate'
                      :end='dateRangeDefaultSetting.weekEndDate'></e-preset>
            <e-preset :label="$t('custom.marketbot.clientUsageReport.thisMonth')"
                      :start='dateRangeDefaultSetting.monthStartDate'
                      :end='dateRangeDefaultSetting.monthEndDate'></e-preset>
            <!-- <e-preset :label="$t('custom.marketbot.clientUsageReport.lastMonth')"
                            :start='dateRangeDefaultSetting.lastMonthStartDate'
                            :end='dateRangeDefaultSetting.lastMonthEndDate'></e-preset>
                  <e-preset :label="$t('custom.marketbot.clientUsageReport.lastYear')"
                            :start='dateRangeDefaultSetting.lastYearStartDate'
                            :end='dateRangeDefaultSetting.lastYearEndDate'></e-preset> -->
          </e-presets>
        </ejs-daterangepicker>
        <el-select v-model="dataForm.status"
                   style="margin-left:15px"
                   @change="getDataList"
                   clearable>
          <el-option label="All"
                     value=""></el-option>
          <el-option label="Succeeded"
                     value="200"></el-option>
          <el-option label="Failed"
                     value="500"></el-option>
        </el-select>
      </div>
    </div>
    <el-table v-loading="loading"
              :data="dataList"
              header-cell-class-name="log_list_headers"
              :height="tableHeight"
              style="width: 100%;border:1px solid #EBEEF5;border-bottom:0">

      <el-table-column type="expand">
        <template slot-scope="scope">
          <div v-if="scope.row.status === 200">
            <div style="backgroundColor:#EEF5DC;color:#404040;display:flex;padding:8px">
              <span class="el-icon-circle-check"
                    style="margin-right:8px;color:#67c23a;margin-top:1px"></span>
              <div>API Sync Succeeded.<br>ID:{{scope.row.id}}<br>Params:{{scope.row.params}}</div>
            </div>
          </div>
          <div v-else>
            <div style="backgroundColor:#FFF1F0;color:#404040;display:flex;padding:8px">
              <span class="cuifont icon_info_circle_fill"
                    style="margin-right:8px;color:#b11b0d;margin-top:1px"></span>
              <div>ID:{{scope.row.id}}<br>{{scope.row.msg}}</div>
            </div>
            <div style="margin-left:32px;margin-top:10px"><span style="font-weight:600;color:#404040">How To Fix:</span> If this error was temporary, you can try resubmitting the run and the issue may have been resolved.</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="time"
                       :label="$t('custom.connector.loginfo.startTime')"
                       header-align="left"
                       align="left">
        <template slot-scope="scope">
          {{ timeAreaFormat(scope.row.time?scope.row.time:0)}}
        </template>
      </el-table-column>
      <el-table-column prop='elapsed_time'
                       :label="$t('custom.connector.loginfo.mins')"
                       header-align="center"
                       align="center"
                       width="180"></el-table-column>
      <!-- <el-table-column prop='params'
                       :label="$t('custom.connector.loginfo.params')"
                       header-align="center"
                       align="center"
                       width="60"></el-table-column> -->
      <el-table-column prop="status"
                       :label="$t('custom.connector.loginfo.status')"
                       header-align="center"
                       align="center">
        <template slot-scope="scope">
          <div style="width:84px;height:24px;line-height:20px;margin:0 auto"
               :class="statusStyle(scope.row.status)">{{scope.row.status===200?'Succeeded':'Failed'}}</div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination :current-page="page" style="margin-top:10px;float:right;padding:0"
                   :page-sizes="[10, 20, 50, 100]"
                   :page-size="pageSize"
                   :total="total"
                   layout="total, sizes, prev, pager, next, jumper"
                   @size-change="pageSizeChangeHandle"
                   @current-change="pageCurrentChangeHandle">
    </el-pagination>
  </div>
</template>

<script>
// import mixinViewModule from '@/mixins/view-module'
import moment from 'moment'

export default {
  // mixins: [mixinViewModule],
  props: {
    subjectCode: String,
    action: String
  },
  data () {
    return {
      pageSize: 10,
      page: 1,
      total: 0,
      dataInfo: {},
      dataForm: {
        searchDate: null,
        api: null,
        status: ''
      },
      detailVisible: false,
      // datailInfo: {},
      dataDetailList: [],
      apiLists: [],
      statusLists: [
        { status: 200 },
        { status: 500 }
      ],
      dateRangeDefaultSetting: {
        format: 'yyyy-MM-dd',
        toDayStartDate: moment.tz(moment.utc(), this.$store.state.user.timezoneId).format(),
        toDayEndDate: moment.tz(moment.utc(), this.$store.state.user.timezoneId).format(),
        minDate: new Date('10/1/2019'),
        maxDate: new Date('1/1/2025'),
        weekStartDate: moment().subtract('days', 6).format(),
        weekEndDate: moment().subtract('days', 0).format(),
        monthStartDate: new Date(new Date(new Date().setDate(1)).toDateString()),
        monthEndDate: new Date(new Date(new Date(new Date().setMonth(new Date().getMonth() + 1)).setDate(0)).toDateString())
        // lastMonthStartDate: moment().subtract(1, 'months').date(1).format(),
        // lastMonthEndDate: moment().date(0).format(),
        // lastYearStartDate: new Date((new Date().getFullYear()) - 1, 1, 1).toDateString(),
        // lastYearEndDate: new Date((new Date().getFullYear()) - 1, 11, 31).toDateString()
      },
      dataList: [],
      loading: false
    }
  },
  computed: {
    tableHeight () {
      return window.innerHeight - 160 - 100 - 30 - 100 - 20 - 40
    }
  },
  created () {
    this.resetDataForm()
    // this.getDataList()
  },
  methods: {
    pageSizeChangeHandle (val) {
      this.page = 1
      this.pageSize = val
      this.getDataList()
    },
    pageCurrentChangeHandle (val) {
      this.page = val
      this.getDataList()
    },
    timeAreaFormat (time) {
      if (time) {
        return moment.tz(time, this.$store.state.user.timezoneId).format('MM/DD/YYYY HH:mm') + ' ' + moment.tz(time, this.$store.state.user.timezoneId).format('zz')
      } else {
        return time
      }
    },
    statusStyle (status) {
      if (status === 200) {
        return 'status_succes'
      } else {
        return 'status_warning'
      }
    },
    resetDataForm () {
      this.dataForm.searchDate = [this.dateRangeDefaultSetting.toDayStartDate, this.dateRangeDefaultSetting.toDayEndDate]
    },
    getDataList () {
      this.loading = true
      var _self = this
      // eslint-disable-next-line no-useless-escape
      const interfaceName = [this.action].map(i => `\'${i}\'`).join()

      const params = {
        tenantId: this.$store.state.user.tenantCode,
        subjectCode: this.subjectCode,
        status: this.dataForm.status,
        interfaceName,
        pageSize: this.pageSize,
        page: this.page
      }

      // validate dataform before query
      if (_self.dataForm) {
        if (_self.dataForm.searchDate && _self.dataForm.searchDate.length >= 2) {
          params.startTime = moment(_self.dataForm.searchDate[0]).format('YYYY-MM-DD') + 'T00:00:00'
          params.endTime = moment(_self.dataForm.searchDate[1]).format('YYYY-MM-DD') + 'T23:59:59'
        } else {
          delete params.startTime
          delete params.endTime
        }
      }
      if (params.status === '') {
        delete params.status
      }
      this.$interface.taskManager.getConnectorLogDetail(params).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.loading = false
        this.dataList = res.data.records
        this.total = res.data.statuscount
        var allCount = {
          total: res.data.total,
          successcount: res.data.successcount
        }
        this.$root.eventBus.$emit('loglistBus', allCount)
      }).catch(() => {
        this.loading = false
      })
    }
  }
}
</script>

<style scoped lang="scss">
.log_lisinfo {
  // width: calc(100% - 30px);
  // box-shadow: 0px -1px 0px 0px #F0F0F0;
  padding-top: 16px;
  ::v-deep .el-card__body {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .query_condtions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    .condition_rg {
      width: 360px;
      margin-bottom: 5px !important;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      > span {
        width: 200px;
        margin-right: 20px;
        .e-input-group-icon {
          border: 0;
        }
      }
    }
    .condition_lf {
      .el-input__inner {
        border: 0;
      }
      .el-input__inner::-webkit-input-placeholder {
        color: #404040;
      }
      .el-input__inner:-moz-placeholder {
        color: #404040;
      }
      .el-input__inner:-ms-input-placeholder {
        color: #404040;
      }
    }
  }
  .el-table thead {
    color: #303133;
  }
  ::v-deep .log_list_headers {
    color: #303133;
    height: 48px;
    // background-color: #F5F7FA !important;
    box-shadow: 1px 1px 0px 0px #f0f0f0;
    border-radius: 2px 0px 0px 0px;
    padding: 0;
  }
  .status_succes {
    background: #f0f9eb;
    border-radius: 2px;
    font-size: 14px;
    font-weight: 400;
    color: #67c23a;
    padding: 2px 8px;
  }
  .status_nosucces {
    background: #fef0f0;
    border-radius: 2px;
    font-size: 14px;
    font-weight: 400;
    color: #f56c6c;
    padding: 2px 8px;
  }
  .status_warning {
    background: #fef0f0;
    border-radius: 2px;
    font-size: 14px;
    font-weight: 400;
    color: #e6a23c;
    padding: 2px 8px;
  }
  .log_kist_info_dialog {
    ::v-deep .el-table__body-wrapper {
      max-height: 400px;
      overflow-y: auto;
    }
  }
}
.el-drawer {
  width: 100% !important;
}
.el-card__body {
  padding-top: 0 !important;
}
.el-card {
  border: 0;
}
::v-deep .el-table__expanded-cell {
  padding: 8px !important;
}
</style>
